/*****************************************************************************************************
* Various other items are below - Items are at top so that specifications below them take presidence *
******************************************************************************************************/
/* primary control of bgcolor of input images */
input { visibility: visible; border-color: white; background-color: white; vertical-align: middle; } 
td { vertical-align: top; } /* to align the text with radio buttons and other input images */
.keBody { font-family: Tahoma, Arial, Helvetica, sans-serif; } /* overall page font control */
textarea {
   width: 550px; height: 250px; border-color: black; }/* controls width of text boxes */
.keTextInput  {
    font-size: 12px; font-weight: normal; border-color: black; }
.keReference {  
    font-size: 10px; font-weight: normal; color: #999999; }
.keDropDown {
    font-size: 14px; font-weight: normal; display: inline; cursor: hand; } 
.keComponent {
    font-size: 14px; background: transparent; margin: 0px 0px 0px 0px; width: 100%; } 
.keContent { 
    font-size: 14px; font-weight: normal; color: #000000; width: 100%; }
.keContent li { /* Plone does a funky shift of li's so this is needed to correct */
    margin-left: 5px; }
.keTitle {  
    font-size: 16px; font-weight: bold; color: #000000; 
    border-bottom: 1px solid #CC0000; width: 100%; }

/*******************************/
/* toolbar controls start here */
/*******************************/
.keToolbar {  
    font-family: Tahoma, Arial, Helvetica, sans-serif; /* note: toolbar is outside of all other ke Tags so need font-family */
    font-size: 10px; background-color: white; font-weight: normal; color: #6badde; 
    border: 1px solid #CCCCCC; margin-bottom: 5px; padding: 3px; width: 100%; }
.keButton  {
    font-size: 10px; font-weight: bold; display: inline; background-color: #CC0000; color: white; 
    border: 1px solid black; cursor: hand;}
.keToolbarDropDown {
    font-size: 10px; display: inline; border: 1px solid #C0C0C0; cursor: hand;} 

/****************************************/
/* specific controls for Sections       */
/***************************************/
/* sections are notable because the title and content are NOT inside the wrapper that surrounds other components */
.keComponent .keSection {  }
.keSection .keTitle {  
    font-size: 16px; font-weight: bold; 
    margin: 10px 10px 0px 10px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */ 
    border-bottom: 1px solid #CC0000; width: 90%; }
.keSection .keSectionGuidance {
    margin: 0px 0px 0px 10px; }
.keSection .keContent {
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 10px 0px 10px; /* Top, Right, Bottom, Left  */ 
        width: 90%; } /* settting width helpful as right margin can mess up things */
.keSection .keSectionComponentsWrapper { /* goes around ALL components of a section */
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 20px 20px 20px; /* Top, Right, Bottom, Left NOTE: left is the indent NOTE: don't use Top */
    width: ; }
.keSection .keSectionComponents { clear: both; }
.keSection .keSectionIndent { }

/****************************************/
/* specific controls for MCQ questions */
/****************************************/
.keMCQ input { /* removes the border present around the radio buttons of an MCQ */
visibility: visible; border-color: white; background-color: white; vertical-align: middle; }
.keComponent .keMCQ {  }
.keMCQ .keTitle {  
    font-size: 16px; font-weight: bold; color: black; border-bottom: 1px solid #CC0000;
    margin: 10px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: 350px; }
.keMCQ .keContent {
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: ; }
.keMCQ .keMCQOptions {
   margin: 8px 0px 0px 0px; /* Top, Right, Bottom, Left best to use only top  */
   width: 100%; }
.keMCQ .keOption {
   font-size: 14px; font-weight: normal; color: #000000; background-color: ; /* good control for entire answer area */
   margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left best to use only top  */
   width: auto; clear: both; }
.keMCQ .keOptionInput { float: left; margin: 0px 0px 0px 0px; width: 25px; }
.keMCQ .keOptionTitle { float: left; margin: 0px 0px 0px 0px; font-weight: normal; color: #696969; width: 15px; }
.keMCQ .keOptionContent { float: left; margin: 0px 0px 0px 0px; width: auto; }
/* keAssessmentContent is the content that shows up in an assessmet when an option is selected */
.keMCQ .keAssessmentContent {  
    display: block; font-size: 12px; font-weight: bold; color: #000000; 
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: 100%; clear: both; }

/*********************************************/
/* specific controls for Selection questions */
/* removes the border present around the input buttons */
.keSelection input {
visibility: visible; border-color: white; background-color: white; vertical-align: middle; }
.keComponent .keSelection {  }
.keSelection .keTitle {  
    font-size: 16px; font-weight: bold; color: black; border-bottom: 1px solid #CC0000;
    width: 100%; margin: 10px 0px 0px 0px; } /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
.keSelection .keContent {  
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: ; }
.keSelection .keOption { 
   font-size: 14px; font-weight: normal; color: black; 
   background-color: ; /* good control for entire answer area */
   margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left best to use only top  */
   width: auto; clear: both; }
.keSelection .keOptionContent { float: left; padding-left: 0px; width: auto; }
.keSelection .keDropDown { font-sise: 14px; }

/*********************************************/
/* specific controls for Checkbox questions  */
/*********************************************/
/* removes the border present around the input buttons */
.keCheckBox input {
visibility: visible; border-color: white; background-color: white; vertical-align: middle; }
.keComponent .keCheckBox {  }
.keCheckBox .keTitle {  
    font-size: 16px; font-weight: bold; color: black; border-bottom: 1px solid #CC0000; width: 100%; 
    margin: 10px 0px 0px 0px; } /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
.keCheckBox .keContent {  
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: ; }
.keCheckBox .keOptionContent { 
   font-size: 14px; font-weight: normal; color: black; 
   background-color: ; /* good control for entire answer area */
   margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left best to use only top  */
   width: auto;  }

/****************************************/
/* specific controls for Paragraphs     */
/***************************************/
.keComponent .keParagraph {  }
.keParagraph .keTitle {  
    font-size: 16px; font-weight: bold; border-bottom: 1px solid #CC0000; width: 100%; 
    margin: 10px 0px 0px 0px; } /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
.keParagraph .keContent {
    font-size: 14px; font-weight: normal; color: black; 
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left  */
    width: ; }

/****************************************/
/* specific controls for Textboxes      */
/***************************************/
.keTextBox input {
visibility: visible; border-color: black; background-color: white;}
.keComponent .keTextBox {  }
.keTextBox .keTitle {  
    font-size: 16px; font-weight: bold; border-bottom: 1px solid #CC0000;
    margin: 10px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */ 
    width: 100%; }
.keTextBox .keContent {
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: ; }
.keTextBox .keTextInput {
    font-size: 12px; font-weight: normal; border-color: black; }

/****************************************/
/* specific controls for Textboxes      */
/***************************************/
.keNumericBox input {
visibility: visible; border-color: black; background-color: white; }
.keComponent .keNumericBox {  }
.keNumericBox .keTitle {  
    font-size: 16px; font-weight: bold; border-bottom: 1px solid #CC0000;
    margin: 10px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */ 
    width: 100%; }
.keNumericBox .keContent {
    font-size: 14px; font-weight: normal; color: black;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */
    width: ; }
.keNumericBox .keTextInput {
    font-size: 12px; font-weight: normal; border-color: black; }

/*******************************/
/* Guidance controls start here */
/*********************************/
.keGuidance { /* spacing around the keGuidance icon */
    margin: 0px 0px 0px 0px; }
.keMCQ .keGuidance { margin-top: 0px; }
.keGuidance .keHeading {
    font-size: 16px; /* size of the font */ font-weight: Bold; /* bolding of content */
    color: black; background-color: steelblue;
    margin: 0px 0px 10px 0px; /* Top, Right, Bottom, Left  */ padding: 5px; width: 100%; }
.keGuidance .keTitle {  
    font-size: 16px; font-weight: bold; color: #000000; 
    border-bottom: 1px solid #CC0000; float: left; width: 350px; }
.keGuidance .keContent {
    font-size: 14px; /* size of the font */ font-weight: normal; /* bolding of content */
    color: black; margin: 10px 0px 20px 10px; /* Top, Right, Bottom, Left  */ }
.keGuidance .CloseButton  {
    font-size: 10px; font-weight: bold; display: inline; background-color: #CC0000; color: white; 
    cursor: hand; width: 50px; }
        
/* :::::::::::::::::::::::::::::::::::::::::::::::::
:: items special image - content 2 Column display ::
:::::::::::::::::::::::::::::::::::::::::::::::::::*/
.keDualColumnHeading {  /* section heading not used in this display */
    border-bottom-width: 0px; border-bottom-color: black; border-bottom-style: solid;
    background-color: white; width: ; text-align: left; }
.keDualColumnHeading .line1 {  
    font-size: 16px; font-weight: bold; color: #000000; 
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */ }
.keDualColumnHeading .line2{  
    font-size: 18px; font-weight: bold; color: #000000;
    margin: 0px 0px 0px 0px; /* Top, Right, Bottom, Left AROUND EACH OPTION; NOTE only use top and bottom  */ }
.keLeftSide {    
    display: inline; font-size: 10pt; font-weight: normal; color: #000000 text-align: left; valign: top; 
        background: white; margin: 0px 0px 0px 0px; /* top, right, bottom, left */ width: 100%;
    height: 100%; /* will control the height of the page, essentially defining the height 
of the spacer down the middle, assuming you don't have keLeftSideImage and keLeftSideContent 
heights set to a larger number NOTE: if you are using Assessment Content this should be left at 100%
such that left side images do not shift when content appears. Otherwise you may set this to whatever you like */ }
.keLeftSideImage {
    height: 250px; text-align: center; valign: top; /* width controlled by columnOne setting in dual column settings */
    margin: 0px 0px 0px 0px; /* top, right, bottom, left */ }
.keLeftSideContent {    
    display: inline; font-size: 10px; font-weight: normal; color: #000000; 
        text-align: center; /* to vertical align use the margin setting top */
    valign: top; background: white; margin: 0px 0px 0px 0px; /* top, right, bottom, left */
    width: 100%; /* will control the height of the page, essentially defining the height of the spacer down the middle */ }
.keMiddle {     
    background: #C0C0C0; width: 1px; }
        
/********************************************************************************************/
/* dual column content or components NOTE: This is NOT the Dual column of Image - Component */
/********************************************************************************************/
.DualcolumnWrapper { border: 0px; background: ;}
.DualcolumnOne { padding-top: 3px; width: 300px;  background: ;} /* width set to ~half the screen width */
.DualcolumnTwo { width: 25px; background: ;} /* middle column with bgcolor will have a vertical linke */
.DualcolumnThree { padding-top: 0px; background: ; }

